<template>
  <div class="apply-page">
    <!-- 头图 -->
    <Toptheme
      imgUrl="toppic01"
      height="380px"
      des1="供应商合作"
      des2="橙券诚邀您的加入，更高效的合作方式，更尖端的技术接入"
      des3="我们期待与您携手前行共创未来"
    />
    <!-- 入驻流程 -->
    <div class="apply-process w1160">
      <h1 class="title tc fz30">入驻流程</h1>
      <div class="process-list flex">
        <div class="process-item item1 felx">
          <img :src="$utils.getImg('flow1')" alt="flow1" />
          <p>填写信息</p>
        </div>
        <div class="process-item item2 felx">
          <img :src="$utils.getImg('flow2')" alt="flow1" />
          <p>填写信息</p>
        </div>
        <div class="process-item item3 felx">
          <img :src="$utils.getImg('flow3')" alt="flow1" />
          <p>填写信息</p>
        </div>
        <div class="process-item felx">
          <img :src="$utils.getImg('flow4')" alt="flow1" />
          <p>填写信息</p>
        </div>
      </div>
    </div>
    <!-- 申请列表 -->
    <ApplyList></ApplyList>
  </div>
</template>

<script setup>
import Toptheme from '@/components/top-theme/index.vue'
import ApplyList from '@/views/apply/components/apply-list.vue'
defineOptions({
  name: 'ApplyPage',
  components: {
    Toptheme,
    ApplyList
  }
})
</script>

<style lang="scss" scoped>
.apply-process {
  padding: 70px 0 100px;
  .title {
    line-height: 60px;
  }
  .process-list {
    position: relative;
    justify-content: space-between;
    align-items: center;
    padding: 0 120px;
    p {
      margin-top: 30px;
      font-size: 20px;
    }
    .after {
      display: block;
      content: '';
      height: 130px;
      width: 52px;
      margin: 0 40px;
      background: url('@/assets/img/flow-r.png') no-repeat center/52px 24px;
    }
    .item1::after {
      position: absolute;
      left: 250px;
      top: 0;
      @extend .after;
    }
    .item2::after {
      position: absolute;
      left: 50%;
      top: 0;
      transform: translateX(-66px);
      @extend .after;
    }
    .item3::after {
      position: absolute;
      right: 250px;
      top: 0;
      @extend .after;
    }
  }
}
</style>
